<template>
	<div id="DailyRecom">
		<!-- 每日推荐 -->
		<div v-for="(item,index) in carGoodsData">
			<img :src="item.goods_small_logo">
			<p>
				<span :title="'商品名称: '+item.goods_name" style="float: left; color: green;">{{item.goods_name}}</span>
				<span :title="'价格: '+item.goods_price"
					style="margin-right: 10px; float: left;color: red; padding-left: 10px;">价格:{{item.goods_price}}</span>
				<!-- 样式搞不起来 -->
				<!-- <span style="left: -100px;">{{item.goods_introduce}} </span> -->
				<span style="margin-right: 10px; float: left; color: salmon;" :title="'库存: '+item.goods_number">库存:{{item.goods_number}} </span> 
				<span style="left: 100px; color: burlywood;" :title="'介绍: '+item.goods_introduce">介绍:{{item.goods_introduce}} </span> 
			</p>
			<p>
				<el-button @click="toCollection(item.goods_id)" type="text" class="button" icon="el-icon-star-off">添加收藏
				</el-button>
				<el-button @click="toCart(item.goods_id)" type="text" class="button" icon="el-icon-goods">加购物车
				</el-button>
			</p>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'calItem',

		props: ['carGoodsData'],

		data: function() {
			return {

			}
		},
		mounted() {
			console.log(this.carGoodsData)
		},
		methods: {
			toCollection: function(goods_id) {
				console.log('！！！！！！！！！！！！！！！！')
				console.log('goods_id', goods_id);
				console.log('使用props 传递方法')
				// this.getGoodsId(goods_id)
				console.log('使用自定义函数')
				this.$emit('getGoodsId', goods_id)
				// console.log('this.getGoodsId 执行完之后')
				console.log('this.$emit(goods_id) 执行完之后')
			},
			toCart: function(goods_id) {
				console.log('goods_id', goods_id);
				this.$emit('getGoodsIdForCart', goods_id)
				console.log('this.$emit(goods_id) 执行完之后')
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	#DailyRecom>div {
		float: left;
		width: 200px;
		height: 270px;
		margin: 10px 10px 13px 12px;
		padding: 8px;
		border: 1px solid #919191;
		transition: all 0.5s;
	}

	#DailyRecom>div:hover {
		border: 2px solid #ff0000;
		transform: translate(0, -10px);
	}

	#DailyRecom>div>img {
		width: 180px;
		height: 165px;
	}

	#DailyRecom>div>p {
		width: 180px;
		font-size: 15px;
		text-align: justify;
		/* text-indent: 2rem; */
	}

	#DailyRecom>div>p:nth-of-type(1) {
		overflow: hidden;
		width: 180px;
		height: 60px;
		margin-top: 5px;
	}

	#DailyRecom>div>p:nth-of-type(2) {
		position: absolute;
		margin-top: 2px;
		text-align: center;
	}

	.el-button:hover {
		color: #1cce66;
	}
</style>
